<template>
  <a-modal
    :visible="visible"
    :title="$t('all.autotext1550')"
    width="50%"
    :footer="null"
    @cancel="handleCancel"
  >
    <p>{{ $t('all.autotext730') }}：{{ $t('all.autotext1553') }} ：{{ ((Number(originData.studyAmountCanUse) + Number(originData.serviceAmountCanUse))).toFixed(2) }} {{ $t('all.autotext811') }}</p>
    <a-form-model
      ref="ruleForm"
      :rules="rules"
      :model="form"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 15 }"
      labelAlign="left"
    >
      <a-form-model-item :label="$t('all.autotext1658')" prop="studyAmount">
        <a-input
          v-model="form.studyAmount"
          :placeholder="$t('all.autotext1658')"
          :precision="2"
          @input="(e) => (this.form.studyAmount = $options.filters.amountCheck(e.target.value))"
          style="width: 90%;"
        />
      </a-form-model-item>
      <p style="margin-left:18%">0≤{{ $t('all.autotext1651') }}≤{{ Number(originData.studyAmountCanUse).toFixed(2) }}<span style="margin-left:20px">(0≤{{ $t('all.autotext1651') }}≤{{ $t('all.autotext1652') }})</span></p>
      <a-form-model-item :label="$t('all.autotext1659')" prop="serverAmount">
        <a-input
          v-model="form.serverAmount"
          :placeholder="$t('all.autotext1659')"
          :precision="2"
          @input="(e) => (this.form.serverAmount = $options.filters.amountCheck(e.target.value))"
          style="width: 90%;"
        />
      </a-form-model-item>
      <p style="margin-left:18%">0≤{{ $t('all.autotext1673') }}≤{{ Number(originData.serviceAmountCanUse).toFixed(2) }}  <span style="margin-left:20px">(0≤{{ $t('all.autotext1673') }}≤{{ $t('all.autotext1674') }})</span></p>
      <p>{{ $t('all.autotext1653') }}：{{ Number(originData.totalBudget).toFixed(2) }} {{ $t('all.autotext1656') }}</p>
      <p>{{ $t('all.autotext1654') }}：-{{ targetBudgt }} {{ $t('all.autotext1656') }}</p>
      <p>{{ $t('all.autotext1655') }}：{{ afterBudgt }}{{ $t('all.autotext1656') }}</p>
      <a-button :loading="btnLoading" type="primary" @click="submit">{{ $t('all.autotext218') }}</a-button>
    </a-form-model>
  </a-modal>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    originData: {
      type: Object,
      default: () => {
        return {

        }
      }
    }
  },
  data () {
    return {
      btnLoading: false,
      form: {
        studyAmount: 0,
        serverAmount: 0
      },
      rules: {
        studyAmount: [{ required: true, validator: this.studyAmountValidate, trigger: 'blur' }],
        serverAmount: [{ required: true, validator: this.serverAmountValidate, trigger: 'blur' }]
      }
    }
  },
  watch: {
    visible (e) {
      if (!e) {
        this.form = {
          studyAmount: 0,
          serverAmount: 0
        }
        this.$refs.ruleForm.resetFields()
      }
    }
  },
  computed: {
    targetBudgt () {
      return (Number(this.form.studyAmount) + Number(this.form.serverAmount)).toFixed(2)
    },
    afterBudgt () {
      return (Number(this.originData.totalBudget) - Number(this.targetBudgt)).toFixed(2)
    }
  },
  methods: {
    studyAmountValidate (rule, value, callback) {
      if (!String(value) || +value < 0 || value > this.originData.studyAmountCanUse) {
        callback(new Error(`${this.$t('all.autotext1657')}${Number(this.originData.studyAmountCanUse).toFixed(2)}`)) // eslint-disable-line
        return
      }
      callback()
    },
    serverAmountValidate (rule, value, callback) {
      if (!String(value) || +value < 0 || value > this.originData.serviceAmountCanUse) {
        callback(new Error(`${this.$t('all.autotext1675')}${Number(this.originData.serviceAmountCanUse).toFixed(2)}`)) // eslint-disable-line
        return
      }
      callback()
    },
    submit () {
      this.$refs.ruleForm.validate(flag => {
        if (flag) {
          this.$emit('ok', this.form)
        }
      })
    },
    handleCancel () {
      this.$emit('handleCancel')
    }
  },
  created () {
    // this.detailForAdjust()
  }
}
</script>
<style lang="less" scoped>

</style>
